<template>
    <template v-for="(cmpnt, index) in cmpnts" :key="cmpnt._id" v-if="cmpnts && cmpnts.length > 0"
        @click.stop="func.active(cmpnt)">
        <div v-if="store.conf.editable" :class="[{ 'w-100': fullRow }, cmpnt.catgory]" class="move d-inline-block">
            <div class="editable  d-inline-block position-relative w-100" :class="[{
                active: cmpnt._id == store.conf.selected._id,
            }]" @click.stop="func.activate(cmpnt)">
                <cmpnt-render :cmpnt="cmpnt" :data="data" :parent="parent" />
                <span class="bar del top-0 end-0 z-1 d-flex">
                    <x-propery :cmpnt="cmpnt" v-model:fields="cmpnt.props.fields" :bizData="data">
                        <i class="iconfont te-i-more-line" style="cursor: default;"></i>
                    </x-propery>
                </span>
                <span class="bar title top-0 start-0 z-1">
                    <span v-text="(cmpnt._ctl || {}).text"> </span>
                </span>
            </div>
        </div>
        <cmpnt-render v-else :cmpnt="cmpnt" :data="data" :parent="parent" />
    </template>

</template>

<script setup>
import { defineProps, onMounted } from 'vue'
import cmpntRender from './cmpntRender.vue';
import { store, func } from "pkgs/stores"
const props = defineProps({
    cmpnts: {
        type: Object,
    },
    parent: {
        type: Object,
        default: () => ({}),
    },
    fullRow: {
        type: Boolean,
        default: false,
    },
    data: {
        type: Object,
        default: () => { },
    },
});


</script>
<style scoped>
.editable {
    cursor: move;
    border-radius: var(--xcode-editable-border-radius);
    padding: var(--xcode-editable-padding);
    margin: var(--xcode-editable-margin);
    background: var(--xcode-editable-background);

}

.editable .more {
    cursor: default;
}


.widgets .title,
.widgets .more {
    border-radius: 4px;
}


.containers>.editable {
    border: var(--xcode-editable-border-d);
}

.containers .title {
    border-bottom-right-radius: 4px;
}

.containers .more {
    border-bottom-left-radius: 4px;
}

.editable .bar {
    position: absolute;
    display: none;
    background: var(--xcode-editable-bar-background);
    border: var(--xcode-editable-bar-border);
}

.editable .bar span,
.editable .bar i {
    color: var(--xcode-editable-bar-color);
    font-size: 0.815rem;
    padding: 0.125rem 0.25rem;
}


.editable:hover .bar,
.editable.active .bar {
    display: inline-block;
}

.containers>.editable:hover,
.containers>.editable.active {
    border: var(--xcode-editable-border-hover);
}
</style>
